/*************  clear default style *************/
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{
	border: 0;font: inherit;vertical-align: baseline;text-align: left;font-family: "Microsoft YaHei";margin: 0;padding: 0;color: #333}
ol, ul {list-style: none}
table {border-collapse: collapse;border-spacing: 0}
form, input, textarea,select{font-family: "Microsoft YaHei";outline: 0;}
::-moz-placeholder {color:#999}
::-webkit-input-placeholder {color:#999}
:-ms-input-placeholder {color:#999}
h1, h2, h3, h4 {font-weight: 400}
i{ font-style:normal; }
.clear {clear: both;}
b{ font-weight: normal; }
.clearfix::after {clear: both; content: ""; display: block; height: 0;}
.clearfix { zoom: 1;}
.fl {float: left}
.fr {float: right}

a{text-decoration:none;color:#333;cursor:pointer;outline:0;*star:expression(this.onFocus=this.blur());}
a:active{border:none;}
a:after{border:none;}
img{border:0}

.trans{ transition: all 0.2s;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;-o-transition: all 0.2s }
.w1200 {width: 1200px;margin: 0 auto}

body{ min-width: 1200px;background-color: #fff; font-size: 14px;}


/********* 充值中心公共样式  *************/
body {background-color: #f1f2f3;}
.header{ width: 100%; height: 88px; background-color: #fff; margin-bottom:20px;position:relative;z-index:5;}
.header .logo_gr{height: 55px; margin-top:16px}
.header .logo_gr a{ width:55px;height:55px;display: inline-block;margin-right:10px;}
.header .logo_gr a img{width:100%;}
.header .logo_gr span{ display: inline-block; height: 34px; line-height: 34px; color:#000; font-size: 16px; margin-left: 25px;   border-left: #ddd 3px solid; padding-left: 32px; margin-top: 11px;}
.header .header-r{ height: 88px; }

/***** 登陆  ********/
.ordinary{position:absolute;top:80px;z-index:5;  width:120px; background:#fff;border-radius:2px; box-shadow: 0px 0px 6px rgba(0,0,0,.26); display:none;  }
.login-con { position: relative; background: #fff;  }
.login-con a{ height:38px; line-height:38px; color:#212121;display:block; text-align:left;position: relative; }
.login-con a i{ background:url(../images/login-user.png) no-repeat 0px 0px; width:17px; height:17px;position: absolute;left: 20px;top: 10px; }
.login-con .wdzh:hover i{ background-position: -37px 0px;}
.ordinary-user{line-height: 88px; }
.login-con a.down-pic i{background-position: 0 -22px;}
.login-con a.down-pic:hover i{background-position: -37px -22px;}
.login-con .recharge-record i{background-position: 0 -88px;}
.login-con .recharge-record:hover i{background-position: -37px -88px;}
.login-con .open-shop i{background-position: 0 -113px;}
.login-con .open-shop:hover i{background-position: -37px -113px;}
.login-con .exit-login i{ background-position: 0 -57px; width:18px; height:18px;  top:18px; }
.login-con .exit-login:hover i{ background-position: -37px -57px;}
.login-con a em{ color: #a8a8a8; padding-left: 4px; font-style: normal; }
.user-login-info { position: relative; line-height: 88px; margin-left:25px;}
.user-login-info .account{color:#333;display: inline-block;max-width: 90px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;float: right;}
.ordinary-user .user-avatar,.design-user .user-avatar{ width: 28px; height: 28px ; border-radius:50%; overflow:hidden; display: inline-block;vertical-align: -7px;margin-right: 10px;_vertical-align:-4px;float:left;margin-top:32px; line-height: 0;}
.ordinary-user .user-name,.design-user .user-name{position:relative;width:auto;display: inline-block;top:-8px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.design-user .user-name a{ color:#000}
.ordinary-user .user-name span,.design-user .user-name span{position: absolute;top: 56px;left:0;font-size: 12px;line-height:13px; color: #000;}
.user-info { line-height: 88px; position: relative;  }
.ordinary .exit-login, .design .exit-login{ height:55px; line-height:55px; border-top:1px solid #eee;}
.left-con ul li{ position: relative;}
.hot-icon{ display: inline-block; width: 50px; height:18px; background: url(//js.wotucdn.com/framework/web/public/mainsite/images/wt-public-icon.png) -152px -355px; position: absolute; top:7px; left:122px;}
.user-box .ordinary-user:hover .ordinary{ display: block;}

/*********** 页面公共左侧  *************/
.left-con{ width: 214px; background-color: #fff; height: auto;}
.left-con h3{height:52px; line-height:52px; color:#333; font-size:18px; text-indent:22px;background:#fff; }
.left-con ul li{ line-height:34px;}
.left-con ul li a{margin-bottom:10px; display:block; width: 100%; height: 100%; color: #1f1f1f;text-indent:22px;border-left:#fff 3px solid; line-height: 34px; transition: all 0.2s}
.left-con ul li a:hover{color: #0ec5a1}
.left-con ul li .on{border-left:#0ec5a1 3px solid; background-color: #f4f4f4;color: #0ec5a1  }
.left-con  .secord-nav{ margin-left: 0px; display:none;}
.left-con  .secord-nav li a{ text-indent: 60px; }
.right-con{ width: 978px; background-color: #fff}


/*********  充值积分样式  ***********/
.right-con{  padding: 20px 0; margin-bottom: 70px;}
.user-infor{ width:870px; height: 46px; line-height: 46px; padding: 0 15px; color: #333; background-color: #f4f5f7; margin: 0 auto 40px; border-radius: 2px}
.user-infor span{ display: inline-block; margin-right:35px;}

/*********  充值VIP样式  ***********/
.headervip{width:900px;margin:0 auto;overflow:hidden;height:auto;padding-bottom:20px;font-size:14px;}
.headervip img{float:left;width:45px;border-radius:50%;margin-top:2px;margin-right:10px;}
.headervip div{}
.headervip div i.vipicon{width:20px;height:20px;display:block;float:left;}
.headervip div i.vipicon img{width:100%;}
.headervip div a{font-size:15px;color:#111;line-height:26px;float:left;}
.headervip div span{line-height:26px;color:#666;}
.headervip div p{color:#333;}
.headervip div .kaitongvip{}
/*选择充值价位*/
.recharge-box{ margin-left: 38px; margin-bottom: 30px}
.recharge-list{ width: 198px; height:198px; border: #ddd 2px solid; border-radius: 4px; background-color: #fff; position: relative;margin-right: 36px;  box-sizing: border-box; cursor: pointer; }
.recharge-sum{ text-align: center; color: #0ec5a1; line-height: 38px;}
.recharge-sum span{ color: #0ec5a1; font-size: 30px ; font-weight: bolder; vertical-align: -6px; padding: 0 5px}
.recharge-list .use-time{ text-align: center; color: #999;width:168px; margin: 0 auto; border-bottom: #f1f2f3 1px solid; line-height:15px; padding-bottom: 20px}
.recharge-list .sel-icon{ display:inline-block; width: 50px; height: 43px ;  background: url(../images/sel-icon.png) 0 0  ; position: absolute; bottom: -2px; right: -2px; z-index: 2;display: none}
.recharge-list .recharge-money{ color: #999; text-align: center; line-height: 14px; margin-top: 15px;}
.recharge-list .recharge-much{ color: #666; text-align: center; line-height: 14px;  margin-top: 20px;}
.recharge-list .orangeColor{ color: #ffb141}
.icon-recommend{ display: inline-block; width: 62px; height: 60px; background: url(../images/sel-icon.png) -54px 0 ; position:  absolute; top: -2px; right:  -2px;}
.noSale .recharge-sum{ margin-top:20px; margin-bottom:18px}
.give-sale{ height: 55px; background-color: #f5f5f5; width: 194px;margin-top: 20px; position: relative;margin: 20px 0 0 0;}
.recharge-box .recharge-list.on{ background-color: #0ec5a1; border-color: #0ec5a1; box-shadow: 0 4px 6px rgba(10,173,141,0.3)}
.recharge-box .recharge-list.on .recharge-sum,.recharge-box .recharge-list.on .recharge-much,.recharge-box .recharge-list.on .recharge-sum span,.recharge-box .recharge-list.on .use-time,.recharge-box .recharge-list.on .recharge-money{ color: #fff;}
.recharge-box .recharge-list.on .sel-icon{ display: block;}
.recharge-box .recharge-list:hover { border:#0ec5a1 2px solid ; }
.recharge-list .sale-box{font-size: 12px;text-align: center; width: 100%; border-bottom: #e5e5e5 1px dashed; margin-bottom: -1px;}
.recharge-list .give-sale p{ color:#999; text-align:center; }
.recharge-list .give-sale .marginTop{ margin-top:20px}
.recharge-list .sale-box span{ position: absolute;  display: inline-block; width:45px; left: 50%; margin-left: -22px; top: -7px; color: #999}
.moudle-title{ color: #666; font-size: 16px; margin: 0 auto; width:900px; position:relative;}
.moudle-title span{ display: inline-block; width: 3px;  height: 20px; background-color: #0ec5a1; line-height: 20px; vertical-align: -2px;  margin-right: 10px;}
.moudle-title:after{ position:  absolute;  content: '';  height: 1px;  width:767px;  background: #f4f5f7;  position: absolute;  top:50%; right: 0;}

/*扫码支付*/
.change-box{ margin-left: 38px;}
.pay-saoma dl{  width: 180px; margin-bottom: 20px}
.pay-saoma dl.zfb-pay{ margin-left:220px; margin-right: 80px;}
.pay-saoma dl.zfb-pay .zfbsrc,.pay-saoma dl.zfb-pay .weixinsrc{background-color:#333;}
.pay-saoma dl dt canvas{ margin: 20px;}
.pay-saoma dl dd{ text-align:center; color: #666; line-height:50px; font-size: 16px;}
.pay-saoma dl dd .icon-zfb{ display: inline-block; width: 22px; height: 22px; background: url(../images/sel-icon.png) 0 -47px; margin-right: 5px; vertical-align: -5px}
.pay-saoma dl dd .icon-wx{ display: inline-block; width: 23px; height: 23px; background: url(../images/sel-icon.png) -25px -47px; margin-right: 5px; vertical-align: -5px}
.pay-saoma dt{ width:178px;height: 178px;overflow: hidden;}
.pay-saoma dl dd a{ color: #0ec5a1}
.pay-saoma dl dd.f14,.pay-saoma dl dd.f14 a{ font-size: 14px}
.pay-saoma dl dd .icon-link-zfb{ display: inline-block; width:19px; height:19px; background: url(../images/sel-icon.png) 0 -74px;vertical-align: -3px }
.pay-saoma dl dd .icon-link-wx{ display: inline-block; width:14px; height:16px; background: url(../images/sel-icon.png) -22px -74px; margin-right: 5px;vertical-align: -2px }

.reminder-con { margin-left: 38px; margin-top:20px}
.reminder-con p{  color: #666; line-height: 20px; margin-bottom: 15px}
.reminder-con p a{ color: #0ec5a1}
.reminder-con p span{ display: inline-block; width:30px;}


/**收藏**/
.allscbox{margin:0 15px 20px 15px;min-height:760px;}
.allscbox h4{background:#f4f4f4;height:38px;line-height:38px;font-size:16px;text-indent:.8em;border-left:3px solid #0ec5a1;margin-bottom:10px;}
.allscbox li{float:left;width:300px;height:auto;margin:8px;cursor: pointer;}
	.allscbox li:hover .cancel{ -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; transition: all .3s ease-in; opacity: 1;}
		.disp-img{width: 300px; height: 200px; position: relative; background: pink;}
			.cancel{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.4); -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; transition: all .3s ease-in; opacity: 0;}
			.cancel a{float: right; width:80px; height:32px; background: rgba(255,255,255,.8); text-align: center; line-height: 32px; border-radius: 3px; margin-right:10px; margin-top:15px;}
		.disp-img img,.author dt img{width: 100%;}
		.allscbox li p{line-height: 40px;}